<template>
  <div class="elite-main">
    <div class="elite-list-warp">
      <div class="elite-list-content" v-for="(item,index) in eliteList" :key="index"  @click="navigateToEminent(item)">
        <img :src="item.img_url" class="elite-list-content-left">
        <div class="elite-list-content-right">
          <div class="name">{{item.name}}</div>
          <text class="info">{{item.introduction}}</text>
        </div> 
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return{
      eliteList:[]
    }
  },
  onShow(){
    this.reqChamberCommerceEliteList();
  },
  //下拉刷新
  onPullDownRefresh () {
  },
  methods:{
    //获取杰出人物列表
    async reqChamberCommerceEliteList(){
      let res = await this.$api.getChamberCommerceEliteList();
      if(res.data.level == "success"){
        wx.stopPullDownRefresh()
        let data = res.data.data;
        this.eliteList = data;
      }else{
        wx.showToast({
          title: '获取活动列表失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    //跳转到杰出人物详情页面
    navigateToEminent(eminen){
      wx.navigateTo({
        url: '/pages/homeMain/eminent/main?id=' + eminen.id
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  .elite-main{
    min-height: 100vh;
    background-color: #f1f1f1;
    .elite-list-warp{
      padding-right: 30rpx;
      background-color: #fff;
      .elite-list-content{
        padding: 30rpx;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f1f1f1;
        .elite-list-content-left{
          width: 130rpx;
          height: 130rpx;
          border-radius: 50%;
          margin-right: 14rpx;
        }
        .elite-list-content-right{
          .name{
            margin-bottom: 10rpx;
          }
          .info{
            width: 468rpx;
            white-space:normal;
            font-size: 24rpx;
            line-height: 42rpx;
            color: #666666;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
    }
  }
</style>